<template>
  <!-- 历史更新 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="problemNo"
      :tool-button="false"
      :pagination="false"
      :height="list.length == 0 ? 200 : list.length < 8 ? '' : 400"
    >
      <template #detailed="scope">
        <el-link type="primary" @click="seeDetails(scope.row)">查看</el-link>
      </template>
      <template #behavior="scope">
        <el-link type="primary" v-if="scope.row.beId" @click="seeBehavior(scope.row)">查看</el-link>
      </template>
    </ProTable>
    <!-- 查看详细弹窗 -->
    <el-dialog v-model="cihistoryInfoShow" title="查看详细">
      <!--  -->
      <div class="table-data-box">
        <div class="data-cell">
          <span class="label">资产名称</span>
          <span class="content">{{ cihistoryInfo.ciname }}</span>
        </div>
        <div class="data-cell">
          <span class="label">配置项分类</span>
          <div class="content" v-html="cihistoryInfo.categoryName"></div>
        </div>
        <div class="data-cell">
          <span class="label">固定资产编号</span>
          <span class="content">{{ cihistoryInfo.cino }}</span>
        </div>
        <div class="data-cell">
          <span class="label">所属客户</span>
          <span class="content">{{ cihistoryInfo.companyName }}</span>
        </div>
        <div class="data-cell">
          <span class="label">状态</span>
          <div class="content">
            <span
              v-if="cihistoryInfo.statusColor"
              :style="{ background: cihistoryInfo.statusColor }"
              style="padding: 0 8px; color: #ffffff"
            >
              {{ cihistoryInfo.status }}
            </span>
            <span v-else>{{ cihistoryInfo.status }}</span>
          </div>
        </div>
        <div class="data-cell">
          <span class="label">位置</span>
          <span class="content">{{ cihistoryInfo.loc }}</span>
        </div>
        <div class="data-cell">
          <span class="label">采购日期</span>
          <span class="content">{{ cihistoryInfo.buyDate }}</span>
        </div>
        <div class="data-cell">
          <span class="label">到货日期</span>
          <span class="content">{{ cihistoryInfo.arrivalDate }}</span>
        </div>
        <div class="data-cell">
          <span class="label">预警日期</span>
          <span class="content">{{ cihistoryInfo.warningDate }}</span>
        </div>
        <div class="data-cell">
          <span class="label">生命周期(月)</span>
          <span class="content">{{ cihistoryInfo.lifeCycle }}</span>
        </div>
        <div class="data-cell">
          <span class="label">保修期(月)</span>
          <span class="content">{{ cihistoryInfo.warranty }}</span>
        </div>
        <div class="data-cell">
          <span class="label">资产原值</span>
          <span class="content">{{ cihistoryInfo.assetsOriginalValue }}</span>
        </div>
        <div class="data-cell">
          <span class="label">部门</span>
          <span class="content">{{ cihistoryInfo.department }}</span>
        </div>
        <div class="data-cell">
          <span class="label">负责人</span>
          <span class="content">{{ cihistoryInfo.owner }}</span>
        </div>
        <div class="data-cell">
          <span class="label">使用人</span>
          <span class="content">{{ cihistoryInfo.userName }}</span>
        </div>
        <div class="data-cell">
          <span class="label">折旧年限(年)</span>
          <span class="content">{{ cihistoryInfo.depreciationIsZeroYears }}</span>
        </div>
      </div>
    </el-dialog>
    <!-- 查看修改内容 -->
    <el-dialog v-model="behaviorInfoShow" title="查看修改内容">
      <!--  -->
      <div class="table-data-box">
        <div class="data-cell row">
          <span class="label">修改内容</span>
          <span class="content" v-html="behaviorInfo.actContent"></span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="HistoricalUpdatesList">
import { ref, reactive, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";

import { findCiHistoryUpdate, findBehaviorModificationByid } from "@/api/modules/assetManagement";

const props = defineProps({
  ciId: Number || String
});

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive([
  { prop: "id", label: "编号" },
  { prop: "revision", label: "更新版本" },
  { prop: "userName", label: "操作者" },
  { prop: "updateDate", label: "更新时间" },
  { prop: "detailed", label: "详细" },
  { prop: "behavior", label: "修改行为" }
]);

const list = ref<any[]>([]);
const loading = ref(true);

const getList = () => {
  list.value = [];
  findCiHistoryUpdate({
    ciEditId: props.ciId
  })
    .then((res: any) => {
      loading.value = false;
      list.value = res || [];
    })
    .catch(() => {
      loading.value = false;
    });
};

getList();

watch(
  () => props.ciId,
  () => {
    getList();
  }
);

// 查看详情
const cihistoryInfoShow = ref(false);
const cihistoryInfo = ref<any>({});
const seeDetails = item => {
  cihistoryInfo.value = JSON.parse(item.cihistoryInfo);
  cihistoryInfoShow.value = true;
};

// 查看修改行为
const behaviorInfoShow = ref(false);
const behaviorInfo = ref<any>({});
const seeBehavior = item => {
  if (!item.beId) {
    ElMessage.warning("暂无修改行为");
    return false;
  }
  loading.value = true;
  findBehaviorModificationByid({
    beId: item.beId
  })
    .then(res => {
      console.log(res);
      loading.value = false;
      behaviorInfoShow.value = true;
      behaviorInfo.value = res;
    })
    .catch(() => {
      loading.value = false;
    });
};
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
